<template>
	<view class="page-container">
		 <!-- 导航栏 -->
		<!--    <view class="nav-bar">
		      <text class="nav-title">救援记录</text>
		    </view> -->
		<!-- 订单列表容器 -->
		<scroll-view class="record-scroll" scroll-y>
			<view class="record-list">
				<!-- 循环渲染订单数据 -->
				<view class="record-card" v-for="(item, index) in recordList" :key="index">
					<!-- 订单头部：服务类型 + 日期 -->
					<view class="card-header">
						<text class="service-type">{{ item.type }}</text>
						<text class="service-date">{{ item.date }}</text>
					</view>

					<!-- 分割线 -->
					<view class="line-divider"></view>

					<!-- 订单详情 -->
					<view class="card-detail">
						<view class="detail-item">
							<text class="detail-label">订单编号：</text>
							<text class="detail-value">{{ item.orderNo }}</text>
						</view>

						<!-- 动态显示位置信息（拖车显示起点/终点，其他显示位置） -->
						<template v-if="item.type === '拖车'">
							<view class="detail-item">
								<text class="detail-label">起点：</text>
								<text class="detail-value">{{ item.startLoc }}</text>
							</view>
							<view class="detail-item">
								<text class="detail-label">终点：</text>
								<text class="detail-value">{{ item.endLoc }}</text>
							</view>
						</template>
						<template v-else>
							<view class="detail-item">
								<text class="detail-label">位置：</text>
								<text class="detail-value">{{ item.location }}</text>
							</view>
						</template>

						<view class="detail-item">
							<text class="detail-label">车牌：</text>
							<text class="detail-value">{{ item.license }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	// 订单数据
	const recordList = ref([{
			type: '换胎',
			date: '2023-02-15',
			orderNo: '121212112487878',
			location: '洛阳市道北路32号XXX小区',
			license: '奔驰FWE4/豫A98FH'
		},
		{
			type: '拖车',
			date: '2023-02-15',
			orderNo: '121212112487878',
			startLoc: '洛阳市道北路32号XXX小区',
			endLoc: '洛阳市道北路39号XXXXXX小区',
			license: '奔驰FWE4/豫A98FH'
		},
		{
			type: '搭电',
			date: '2023-02-15',
			orderNo: '121212112487878',
			location: '洛阳市道北路32号XXX小区',
			license: '奔驰FWE4/豫A98FH'
		}
	]);
</script>

<style>
	.page-container {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 导航栏样式 */
	.nav-bar {
		height: 100rpx;
		background-color: #007AFF;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 20rpx;
		/* 适配状态栏 */
	}

	.nav-title {
		color: #fff;
		font-size: 36rpx;
		font-weight: 500;
	}

	/* 滚动容器 */
	.record-scroll {
		width: 100%;
		height: calc(100vh - 100rpx);
		/* 减去导航栏高度 */
	}

	/* 订单列表 */
	.record-list {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	/* 订单卡片 */
	.record-card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	/* 卡片头部 */
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 25rpx;
	}

	.service-type {
		color: #007AFF;
		/* 服务类型蓝色 */
		font-size: 32rpx;
		font-weight: 600;
	}

	.service-date {
		color: #999;
		font-size: 26rpx;
	}

	/* 分割线 */
	.line-divider {
		width: 100%;
		height: 1rpx;
		background-color: #eee;
		margin-bottom: 25rpx;
	}

	/* 详情内容 */
	.card-detail {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		/* 详情项间距 */
	}

	.detail-item {
		font-size: 28rpx;
		line-height: 1.6;
	}

	.detail-label {
		color: #666;
		/* 标签灰色 */
	}

	.detail-value {
		color: #333;
		/* 内容深灰 */
	}
</style>